<template>
  <!-- 定义一个名为starry的div，包含6个star的div -->
  <div class="starry">
    <div class="star1"></div>
    <div class="star2"></div>
    <div class="star3"></div>
    <div class="star4"></div>
    <div class="star5"></div>
    <div class="star6"></div>
  </div>
</template>

<script setup lang="ts"></script>

<style lang="scss" scoped>
.starry {
  /* 设置starry的宽度和高度为视口宽度和高度，背景为黑色 */
  width: 100vw;
  height: 100vh;
  background: #000;
}
@function shadowFun($n) {
  /* 定义一个函数，生成随机的阴影 */
  $shadows: "#{random(100)}vw #{random(100)}vh #fff";
  //   @debug $n;
  @for $i from 2 through $n {
    $shadows: "#{$shadows}, #{random(100)}vw #{random(100)}vh #fff";
  }

  @return unquote($shadows);
}

@keyframes moveUp {
  /* 定义一个动画，使元素向上移动100vh */
  100% {
    transform: translateY(-100vh);
  }
}

$time: 100s;
$count: 1600;
@for $i from 1 through 6 {
  /* 循环6次，每次将时间减半，数量减半 */
  $time: calc($time / 2);
  $count: calc($count / 2);
  .star#{$i} {
    /* 设置star的大小，位置，边框半径，阴影，动画 */
    $size: #{$i}px;
    position: fixed;
    width: $size;
    height: $size;
    border-radius: 50%;
    top: 0;
    left: 0;
    box-shadow: shadowFun($count);
    animation: moveUp $time linear infinite;
    &::after {
      /* 设置star的伪元素，位置，大小，边框半径，阴影 */
      content: "";
      position: fixed;
      left: 0;
      top: 100vh;
      width: $size;
      height: $size;
      border-radius: inherit;
      box-shadow: inherit;
    }
  }
}
</style>
